<template>
    <div class="nav">
        <div class="imgtop">
            <img src="../assets/img/topphone.jpg" alt="">
        </div>
        <div class="list">
            <p>明星产品</p>
            <ul>
                <li v-for="(item,index) in phoneList" :key="index">
                   <router-link to="">
                       <img :src="item.imageHead" alt="">
                        <div class="context">
                            <h4>{{item.name}}</h4> 
                            <p>{{item.title}}</p> 
                            <h3>{{item.price}}元起</h3>
                            <del>{{item.del_price}}</del>
                        </div>
                   </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name:'most_phone',
    data(){
        return {
            phoneList:''//手机列表
        }
    },
     created(){
        this.$axios.get("/data/phone.json")
        .then(res => {
        console.log(res.data.phone)
        this.phoneList = res.data.phone
        })
        .catch(err => {
            // return Promise.reject(err);
            console.log(err)
      });
  }
}
</script>
<style scoped>
@import '../assets/css/index.css';
.imgtop img{
    height: 100%;
    width: 100%;
}
.nav{
    margin: 0 auto;
    width: 90%;
}
.list p {
    font-size: 30px;
    margin: 10px
}
.list ul li{
    width: 50%;
    float: left;
    border-top: 10px rgb(190, 189, 189,0.1) solid;
}

.list ul li img{
    width: 95%;
    height: 100%;
    margin-left: 15px;
}
.list ul li .context{
    margin: 20px 20px;
}
.list ul li h4{
    color: rgb(17, 17, 17);
    font-size: 25px;
}
.list ul li p{
    
    color: rgb(134, 133, 133);
    font-size: 15px;
}
.list ul li h3{
    float: right;
    font-weight: 100;
    font-size: 25px;
    margin-right: 60px;
    margin-top: -45px;
    color: rgb(238, 11, 11);
}
.list ul li del{
    float: right;
    margin-right: 5px;
    margin-top: -25px;
    color: rgb(160, 158, 158);
}
</style>